<template>
    <div class="login-container">
        <div class="login-box">
            <form>

            </form>
            <a-form>

            </a-form>
            <div class="login-title">{{title}}</div>
            <a-form :model="userData" auto-label-width>
                <a-form-item label="用户名">
                    <a-input v-model:value="userData.username" placeholder="请输入用户名" />
                </a-form-item>
                <a-form-item label="密码">
                    <a-input v-model:value="userData.password" placeholder="请输入密码" />
                </a-form-item>
                <a-form-item label="验证码">
                    <a-input v-model:value="userData.code" placeholder="请输入验证码" />
                </a-form-item>
            </a-form>
            <a-button type="primary" style="width: 100%;" @click="login">登录</a-button>
        </div>
    </div>
</template>

<script setup>
import { onMounted, ref } from 'vue'
import { postManageLogin } from '../api/manage.js'
import { useRouter } from 'vue-router'
// 路由
const router = useRouter()
// 登录数据
const userData = ref({
    username: '',
    password: '',
    code: ''
})
// 标题
const title = import.meta.env.VITE_BASE_TITLE

// 登录
const login = () => {
    console.log(userData.value)
    router.push({path: '/base'})
}

onMounted(() => {
    postManageLogin({
        account : 'admin',
        password_hash : '123456'
    }).then(res => {
        console.log(res);
    })
})

</script>

<style>
.login-container {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100vw;
    height: 100vh;
    background-color: black;
}
.login-box {
    width: 400px;
    background-color: #fff;
    border-radius: 10px;
    padding: 30px 50px;

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}
.login-title {
    font-size: 24px;
    font-weight: bold;
    margin-bottom: 20px;
}
</style>
